<template>
    <div>
        <van-nav-bar
                title="详情"
                left-text="返回"
                right-text="地图"
                left-arrow
                @click-left="onClickLeft"
                @click-right="onClickRight()"
        />
    </div>
    <!--1.内容-->
    <div>
        <van-row gutter="20">
            <van-col span="24">
                <van-swipe :autoplay="3000" lazy-render>
                    <van-swipe-item >
                        <img :src="sight.img" />
                    </van-swipe-item>
                </van-swipe>
            </van-col>
            <van-col span="24"><h2>{{sight.title}}</h2></van-col>
            <van-col span="12"><van-rate v-model="sight.assess" /><label class="l2"> {{sight.assess}}.0 </label></van-col>
            <van-col span="12"><label class="l2">门票/每人：{{sight.price}}元</label></van-col>
            <van-col span="24" style="padding-top: 3rem"><label class="l1">简介：{{sight.detail}}</label></van-col>
        </van-row>
    </div>
    <div>
        <van-divider dashed><h3>网友评价：</h3></van-divider>
        <van-row gutter="10">
            <van-col span="24">
                <van-card class="card1" v-for="g in msg1"
                          :tag="g.name"
                          :thumb="g.img"
                          :desc="g.info"
                          :title="g.ctime"
                >
                        <template #footer>
                            <van-rate v-model="g.assess" />
                        </template>

                </van-card>
            </van-col>
        </van-row>
    </div>
</template>

<script>
    export default {
        name: "SightDetaileView",
        data(){
            return{
                sight:{},
                msg1:null,
                // assess:0
            }
        },
        setup(){
            const onClickLeft = () => history.back();
            return {
                onClickLeft,
            };
        },
        created() {
            var that=this;
            this.axios.get("http://localhost:8081/api/sight/comment.do?id="+this.$route.query.id).then(res => {
                if (res.data.code == 200) {
                    that.msg1=res.data.data;
                } else {
                    Toast(res.data.msg);
                }
            }),
                this.axios.get("http://localhost:8081/api/sight/detail.do?id="+this.$route.query.id).then(res => {
                    if (res.data.code == 200) {
                        that.sight=res.data.data;
                    } else {
                        Toast(res.data.msg);
                    }
                })
        },
        methods:{
            //查看地图
            onClickRight(){
                this.$router.push({ path: 'sightmap'});
            }
        }
    }
</script>

<style scoped>
    .l1{
        height: 100rem;
        font-size: 1rem;
    }
    .l2{
        height: 100rem;
        font-size: 1rem;
        color: red;
    }
    .card1{
        height: 150px;
    }
</style>